<template>
  <div class="scene" ref="sceneDiv">
      
  </div>
</template>

<script setup>
import {onMounted,ref,onBeforeUnmount} from 'vue';
import * as THREE from 'three';
// 导入场景
import scene from "@/three/scene"
// 导入相机
import camera from "@/three/camera"
// 导入gui对象
// import gui from "@/three/gui"
// 导入renderer对象
import renderer from "@/three/renderer"
// 导入辅助坐标轴
// import axesHelper from "@/three/axesHelper";
// 导入控制器
import controls from "@/three/controls";
// 导入每一帧的执行函数
import animate from "@/three/animate";
// 初始化调整屏幕
import "@/three/init";
// 导入创建物体函数
import createMesh from "@/three/createMesh";
// 导入引入JSON的数据
import {jsonLoader} from "@/three/jsonLoader";
// 场景元素div
let sceneDiv = ref(null);


// 添加相机
scene.add(camera)
// 添加辅助坐标轴
// scene.add(axesHelper);
createMesh();
onMounted(()=>{
  // 将webgl渲染的canvas内容添加到body上
  sceneDiv.value.appendChild(renderer.domElement);
  jsonLoader();
  animate();
})

onBeforeUnmount(()=>{
  console.log('销毁')
  sceneDiv.value.removeChild(renderer.domElement);
  // 销毁渲染器
  renderer.dispose();
})
</script>

<style>
.scene{
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index:100;
  left:0;
  top:0;
}
</style>